import React from 'react'
import { Row, Col, Layout, BackTop } from 'antd'
import MobileHeader from './mobile_header';
import MobileFooter from './mobile_footer';
import CommonComments from '../common_comment'
import { store } from '../../store/store'

const { Content } = Layout;

class MobileNewsDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      newsItem: ''
    }
  }

  componentDidMount() {
    const uniquekey = this.props.match.params.uniquekey
    store.getNewDetail(uniquekey)
      .then(newsItem => {
        this.setState({
          newsItem
        })
        document.title = newsItem.title
      })
  }

  render() {
    const uniquekey = this.props.match.params.uniquekey
    return (
      <div>
        <MobileHeader />
        <Content>
          <Row />
          <Row>
            <Col span={22} offset={1}>
              <div dangerouslySetInnerHTML={{ __html: this.state.newsItem.pagecontent }}></div>
              <CommonComments uniquekey={uniquekey} />
            </Col>
          </Row>
        </Content>
        <MobileFooter />
        <BackTop />
      </div>
    )
  }
}

export default MobileNewsDetails
